<template>
  <div class="projects">
    <h1 class="page-title">{{ $t('nav.projects') }}</h1>
    
    <div class="projects-filter">
      <el-radio-group v-model="activeCategory" size="large">
        <el-radio-button value="all">{{ $t('projects.all') }}</el-radio-button>
        <el-radio-button value="web">{{ $t('projects.web') }}</el-radio-button>
        <el-radio-button value="mobile">{{ $t('projects.mobile') }}</el-radio-button>
        <el-radio-button value="other">{{ $t('projects.other') }}</el-radio-button>
      </el-radio-group>
    </div>
    
    <div class="projects-grid">
      <el-card 
        v-for="project in filteredProjects" 
        :key="project.id" 
        class="project-card"
        :body-style="{ padding: '0px' }"
      >
        <div class="project-image">
          <img :src="project.image" :alt="project.title" />
        </div>
        <div class="project-content">
          <h3>{{ project.title }}</h3>
          <p class="project-description">{{ project.description }}</p>
          <div class="project-tags">
            <el-tag 
              v-for="tag in project.tags" 
              :key="tag" 
              size="small" 
              class="project-tag"
            >
              {{ tag }}
            </el-tag>
          </div>
          <div class="project-links">
            <el-button 
              v-if="project.demoUrl" 
              type="primary" 
              size="small" 
              @click="openUrl(project.demoUrl)"
            >
              {{ $t('projects.liveDemo') }}
            </el-button>
            <el-button 
              v-if="project.codeUrl" 
              size="small" 
              @click="openUrl(project.codeUrl)"
            >
              {{ $t('projects.viewCode') }}
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 项目分类
const activeCategory = ref('all')

// 示例项目数据 图片400x250
const projects = [
  {
    id: 1,
    title: '个人网站',
    description: '使用Vue 3和Element Plus构建的响应式个人网站',
    image: 'https://img2.baidu.com/it/u=2411913915,1886627173&fm=253&fmt=auto&app=138&f=JPEG?w=1058&h=500',
    category: 'web',
    tags: ['Vue 3', 'TypeScript', 'Element Plus'],
    demoUrl: '#',
    codeUrl: 'https://github.com/yourusername/personal-website'
  },
  {
    id: 2,
    title: '任务管理应用',
    description: '一个简单的任务管理应用，支持任务创建、编辑和删除',
    image: 'https://img0.baidu.com/it/u=1794446684,670257320&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    category: 'web',
    tags: ['React', 'Redux', 'Firebase'],
    demoUrl: '#',
    codeUrl: 'https://github.com/yourusername/task-manager'
  },
  {
    id: 3,
    title: '天气预报应用',
    description: '使用OpenWeatherMap API的移动天气应用',
    image: 'https://img0.baidu.com/it/u=1391220401,373694560&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
    category: 'mobile',
    tags: ['React Native', 'Expo', 'API'],
    demoUrl: null,
    codeUrl: 'https://github.com/yourusername/weather-app'
  },
  {
    id: 4,
    title: '数据可视化工具',
    description: '使用D3.js创建的交互式数据可视化工具',
    image: 'https://img2.baidu.com/it/u=1318204319,885386997&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    category: 'web',
    tags: ['D3.js', 'JavaScript', 'SVG'],
    demoUrl: '#',
    codeUrl: 'https://github.com/yourusername/data-viz'
  },
  {
    id: 5,
    title: '命令行工具',
    description: '用Python编写的文件处理命令行工具',
    image: 'https://img2.baidu.com/it/u=1345195728,452655551&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
    category: 'other',
    tags: ['Python', 'CLI', 'File Processing'],
    demoUrl: null,
    codeUrl: 'https://github.com/yourusername/file-cli'
  }
]

// 根据选择的分类过滤项目
const filteredProjects = computed(() => {
  if (activeCategory.value === 'all') {
    return projects
  }
  return projects.filter(project => project.category === activeCategory.value)
})

// 打开URL
const openUrl = (url: string) => {
  window.open(url, '_blank')
}
</script>

<style scoped>
.projects {
  padding: 40px 0;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.projects-filter {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.project-image {
  height: 200px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.05);
}

.project-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.project-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.project-description {
  color: var(--el-text-color-regular);
  margin-bottom: 15px;
  flex-grow: 1;
}

.project-tags {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.project-tag {
  margin-right: 5px;
}

.project-links {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .projects-filter .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>